<html>
  <head>
    <title>TV youtube ${videos ? '- ' + videos[0].title : ''}</title>
    <meta name="layout" content="categorizedVideo"/>
    <meta name="keywords"
          content="youtube, TV, TV youtube, watch youtube continuously, watch youtube like TV, youtube.net, ${videos[0].title}"/>
    <meta name="description"
          content="Watch youtube continuously like TV${videos ? '. Now watching ' + videos[0].title : ''}"/>
    <g:javascript src="prototype/prototype.js"/>
    <g:javascript src="videoCategory.js"/>
  </head>

  <body onload="setTimeout('checkInitialVideos(videoIndex + 1)', 1000)">
    <div id="left-panel">
      <h1>${videos ? videos[0].title : 'Ooops, nothing to display'} on TV youtube</h1>

      <div id="player-container">
        <script type="text/javascript" src="/js/swfobject.js"></script>

        <div id="ytapiplayer" style="width: 640px" padding="10px">
          You need Flash player 8+ and JavaScript enabled to view this video.
          <img src="${videos[0]?.thumbnail}" style="width: 640px"/>
        </div>
      </div>
      <script type="text/javascript">
        var currentVideoCategoryFeed = "${currentVideoCategory.feed}";
        var currentVideoCategoryTime = "${currentVideoCategory.time}";

        var videos = [];
        <g:each var="videoId" in="${videos*.id}" status="status">
        videos[${status + startIndex}] = "${videoId}";
        </g:each>
        var videoIndex = ${startIndex};
        var params = { allowScriptAccess:"always", allowfullscreen:"true" };
        var atts = { id:"myytplayer" };
        swfobject.embedSWF("http://www.youtube.com/e/" + videos[videoIndex] + "?enablejsapi=1&playerapiid=ytplayer&autoplay=1&fs=1&wmode=opaque",
                "ytapiplayer", "640", "480", "8", null, null, params, atts);
      </script>

      <div id="filmstrip">
        <g:each var="row" in="${(0..2)}">
          <div class="clear">
            <g:set var="newStartIndex" value="${row * 30}"/>
            <g:include action="framesLine" params="[startIndex: newStartIndex, currentIndex: startIndex, feed: params.feed, time: params.time]"/>
          </div>
        </g:each>
      </div>
    </div>
    <script type="text/javascript">
      (function () {
        var po = document.createElement('script');
        po.type = 'text/javascript';
        po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(po, s);
      })();
    </script>
  </body>
</html>